//权限管理

import React, { Component } from 'react';
import { connect } from 'dva';
import { Tree,  Button, Input, message } from 'antd';
import style from './AuthorityManage.less'
import request from '../../../utils/request';

const { TreeNode } = Tree;
const Search = Input.Search;
class AuthorityManage extends Component {

    //进入页面事件

    state = {
        SValue:"",
        expandedKeys: [],
        searchValue:'',
        autoExpandParent: true,
       
        selectedKeys:[],
        expandedKeys2: [],
        autoExpandParent2: true,
        checkedKeys2: [],
        selectedKeys2: [],
        gData:[],
        treeData:[]
    }

    componentDidMount() {
        this.save(this.state.SValue)
    }
    //查询角色
    save = (name) => {
        const stateData = {
            roleName:name
        }

        request({
            url: '/web/redstar/vortex/getListTree',
            method: 'POST',
            data: stateData
        }).then(data => {
            // console.log(data)
            if(data.rc === 0) {
                if(data.ret.length > 0) {
                    this.setState({
                        gData:data.ret,
                        selectedKeys:[data.ret[0].key]
                    })
                   
                    this.saveAuth(data.ret[0].key)
                }else {
                    message.warning("查无此人,请重新输入!")
                }
               
            } else {
                message.warning("查无此人,请重新输入!")
            }

        })


       
    }

    //查询角色权限
    saveAuth = (id) => {
        const stateData = {
            roleId:id
        }

        request({
            url: '/web/redstar/vortex/getTreeData',
            method: 'POST',
            data: stateData
        }).then(data => {
            if(data.rc === 0 ) {
                // console.log(data,"id")
                this.setState({
                    checkedKeys2:data.ret.defaultList,
                    treeData:data.ret.treeList,
                    expandedKeys2:data.ret.defaultList
                })
            }
        })

    }

    //确定修改权限
    onEnsure = () => {
        // console.log(this.state.checkedKeys2,this.state.selectedKeys[0])
        const stateData = {
            menuList:this.state.checkedKeys2,
            roleId:this.state.selectedKeys[0]
        }
        request({
            url: '/web/redstar/vortex/updateMenu',
            method: 'POST',
            data: stateData
        }).then(data => {
            if(data.rc === 0 ){
                message.success("修改成功!")
            } else {
                message.warning("修改失败!")
            }
        })

    }



    onExpand = (expandedKeys) => {
        this.setState({
            expandedKeys,
            autoExpandParent: false,
        });
    }

    onSelect = (selectedKeys, e) => {
        // console.log("event, node", selectedKeys, e.selectedNodes, e.node, e.event)
        this.setState({
            selectedKeys
        })
        this.saveAuth(selectedKeys[0])
    }

    onExpand2 = (expandedKeys2) => {
        // console.log('onExpand', expandedKeys2);
        // if not set autoExpandParent to false, if children expanded, parent can not collapse.
        // or, you can remove all expanded children keys.
        this.setState({
            expandedKeys2,
            autoExpandParent2: false,
        });
    }

    onCheck2 = (checkedKeys2) => {
        // console.log('onCheck', checkedKeys2);
        this.setState({ checkedKeys2 });
    }

    onSelect2 = (selectedKeys2, info) => {
        // console.log('onSelect', info);
        this.setState({ selectedKeys2 });
    }

    renderTreeNodes = data => data.map((item) => {
        if (item.children) {
            return (
                <TreeNode title={item.title} key={item.value} dataRef={item}>
                    {this.renderTreeNodes(item.children)}
                </TreeNode>
            );
        }
        return <TreeNode {...item} />;
    })


    onSearchChange = (a,b) => {
      
        this.setState({
            [a]:b.target.value
        })
    }

    onSearch = () => {
        // console.log(this.state.SValue)
        this.save(this.state.SValue)

    }

    render() {
        const { searchValue, expandedKeys, autoExpandParent, gData } = this.state;
        const loop = data => data.map((item) => {
            const index = item.title.indexOf(searchValue);
            const beforeStr = item.title.substr(0, index);
            const afterStr = item.title.substr(index + searchValue.length);
            const title = index > -1 ? (
                <span>
                    {beforeStr}
                    <span style={{ color: '#f50' }}>{searchValue}</span>
                    {afterStr}
                </span>
            ) : <span>{item.title}</span>;
            if (item.children) {
                return (
                    <TreeNode key={item.key} title={title}>
                        {loop(item.children)}
                    </TreeNode>
                );
            }
            return <TreeNode key={item.key} title={title} />;
        });
        return (
            <div style={{flex:1,display:'flex',flexDirection:'column'}}>
                <div className={style.wrapBox}>

                <div style={{ flex: 1, height: "85vh", padding: 24 }}>
                    <div style={{ position: "fixed", backgroundColor: "rgba(204, 204, 204, 0.2)", borderRadius: 10, width: 150, height: 50, bottom: "5vh", right: "5vh", zIndex: 99, display: "flex", alignItems: "center", flexDirection: "column", justifyContent: "space-around", padding: 8 }}>
                        <Button type="primary" block onClick={this.onEnsure}>确定</Button>
                    </div>
                    <div style={{ height: 20, width: "100%", display: "flex", alignItems: "center", marginBottom: 20 }}>
                        <span style={{ color: "#fff", width: 20, height: 20, borderRadius: "50%", backgroundColor: "#3996ff", display: "inline-block", textAlign: 'center', marginRight: 20 }}>1</span>角色列表
                        <span style={{ flex: 1, height: 1, backgroundColor: "#3996ff", display: "inline-block", marginLeft: 20 }}></span>
                    </div>
                    <div style={{ flex: 1, overflow: "auto",height: "78vh" }}>
                        <Search style={{ marginBottom: 8 }} value={this.state.SValue} placeholder="请输入名字" onChange={this.onSearchChange.bind(this,'SValue')} onSearch={this.onSearch}/>
                        <Tree
                            onExpand={this.onExpand}
                            selectedKeys={this.state.selectedKeys}
                            expandedKeys={expandedKeys}
                            autoExpandParent={autoExpandParent}
                            defaultExpandParent
                            defaultSelectedKeys={this.state.defaultSelectedKeys}
                            onSelect={this.onSelect}
                        >
                            {loop(gData)}
                        </Tree>
                    </div>

                </div>

                <div style={{ flex: 1, height: "85vh", padding: 24 }}>
                    <div style={{ height: 20, width: "100%", display: "flex", alignItems: "center", marginBottom: 20 }}>
                        <span style={{ color: "#fff", width: 20, height: 20, borderRadius: "50%", backgroundColor: "#3996ff", display: "inline-block", textAlign: 'center', marginRight: 20 }}>2</span>页面权限分配
                        <span style={{ flex: 1, height: 1, backgroundColor: "#3996ff", display: "inline-block", marginLeft: 20 }}></span>
                    </div>
                    <div style={{ height: "75vh",borderLeft:"1px solid #dbdbdb", marginLeft: 9, marginTop: 20, display: "inline-block", float: "left",marginRight:10 }}> </div>
                    <div style={{ flex: 1, overflow: "auto",height: "78vh"  }}>

                        <Tree
                            checkable
                            onExpand={this.onExpand2}
                            expandedKeys={this.state.expandedKeys2}
                            autoExpandParent={true}
                            onCheck={this.onCheck2}
                            checkedKeys={this.state.checkedKeys2}
                            onSelect={this.onSelect2}
                            selectedKeys={this.state.selectedKeys2}
                        >
                            {this.renderTreeNodes(this.state.treeData)}
                        </Tree>
                    </div>
                </div>



            </div>
            </div>
            
        )
    }


}

export default connect()(AuthorityManage)